<template>
  <el-button @click="handleShow">{{ props.btnText || '查看' }}</el-button>
  <el-dialog v-model="state.dialogVisible" :title="props.dialogTitle || '查看资料'" width="55%" append-to-body>
    <div>
      <el-descriptions class="margin-top" :column="4" border>
        <el-descriptions-item label="证件照">
          <img :src="props.detailInfo.idPhoto" style="width: 90px;height: 90px;" />
        </el-descriptions-item>
        <el-descriptions-item label="姓名">
          {{ props.detailInfo.idName }}
        </el-descriptions-item>
        <el-descriptions-item label="性别">
          {{ props.detailInfo.gender ? props.detailInfo.gender === "man" ? "男" : "女" : '-' }}
        </el-descriptions-item>
        <el-descriptions-item label="国籍">
          {{ nationalityText }}
        </el-descriptions-item>
        <el-descriptions-item label="证件号">
          <span v-if="props.detailInfo.idNumber">{{ props.detailInfo.idNumber }}</span>
          <span v-else>-</span>
        </el-descriptions-item>
        <el-descriptions-item label="联系方式">
          <span v-if="props.detailInfo.phoneNumber">{{
            props.detailInfo.phoneNumber
          }}</span>
          <span v-else>-</span>
        </el-descriptions-item>
        <el-descriptions-item label="身高">
          <span v-if="props.detailInfo.height"
            >{{ props.detailInfo.height }}cm</span
          >
          <span v-else>-</span>
        </el-descriptions-item>
        <el-descriptions-item label="体重">
          <span v-if="props.detailInfo.weight"
            >{{ props.detailInfo.weight }}kg</span
          >
          <span v-else>-</span>
        </el-descriptions-item>
        <el-descriptions-item label="所属单位/学校">
          <el-tag size="small" v-if="props.detailInfo.currentEmployer">{{
            props.detailInfo.currentEmployer
          }}</el-tag>
          <span v-else>-</span>
        </el-descriptions-item>
        <el-descriptions-item label="职位">
          <span v-if="props.detailInfo.position">{{
            props.detailInfo.position
          }}</span>
          <span v-else>-</span>
        </el-descriptions-item>
      </el-descriptions>
      <div
        class="descriptions-item"
        v-if="
          props.detailInfo.idCardFrontPhoto ||
          props.detailInfo.idCardReversePhoto
        "
      >
        <div class="descriptions-label">身份证正反面</div>
        <img class="id-img" :src="props.detailInfo.idCardFrontPhoto" />
        <img class="id-img" :src="props.detailInfo.idCardReversePhoto" />
      </div>
      <div
        class="descriptions-item"
        v-if="props.detailInfo.healthCertificate"
      >
        <div class="descriptions-label">体检证明</div>
        <img class="id-img" :src="props.detailInfo.healthCertificate" />
      </div>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="state.dialogVisible = false">关闭</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script lang='ts' setup>
import { computed, reactive } from 'vue';
import { nationalityList } from '@/config/data'

const props = defineProps(["btnText", "dialogTitle", "id", "show", "detailInfo"])
const state = reactive<{
  dialogVisible: boolean
}>({
  dialogVisible: false,
})

const nationalityText = computed(() => {
  const _nationality = nationalityList.find(item => item.value === props.detailInfo.nationality)  
  return _nationality ? _nationality.text : props.detailInfo.nationality
})

const handleShow = () => {
  state.dialogVisible = true
  props.show(props.id)
}
</script>
<style lang='scss' scoped>
.id-img {
  width: 200px;
  height: 130px;
}
.id-img + .id-img {
  margin-left: 10px;
}
</style>